//直播组件
Vue.component('LiveBroadcast', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}" style="display:flex; justify-content: space-between;margin-top: 50px;">
    <div style="flex-shrink: 1; display: flex; flex-direction: column; width: 830px; 
        background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);">
        <div style="flex-shrink: 1;display: flex; height: 104px; width: 100%;">
            <div style="margin: 17px; display: flex; align-items: center;">
                <el-image style="width: 64px;height: 64px; border-radius: 50%;" src="img/t1.png"></el-image>
                <div style="margin-left: 17px; height: 80%; display: flex;flex-direction: column; justify-content: space-between;">
                    <span style="font-size: 16px;">宋航的直播间
                        <span style="font-size: 12px; color: #919191;">房间号：{{'15000123123'}}</span>
                    </span>
                    <span style="font-size: 14px; color: #919191;">暂无备注说明！</span>
                </div>
            </div>
        </div>
        <div style="position: relative;width: 100%;height: 495px;background-color: #000;">
            <video id="video" controls loop="false" autoplay="true" muted="true" width="100%" height="100%"></video>
            <canvas v-show="isLiveBarrage" style="width: 100%; height: calc(100% - 65px); position: absolute;left: 0; top: 0;"></canvas>
        </div>
        <div style="display: flex; font-size: 14px; align-items: center; width: 100%; height: 46px;">
            <span style=" margin-left: 10px;">当前观看人数 1 人</span>
            <div style=" margin-left: 50px; display: flex; align-items: center;">
                <span style="margin: 0 10px;">弹幕</span>
                <el-switch v-model="isLiveBarrage"></el-switch>
            </div>
        </div>
    </div>
    <div style="display: flex; flex-direction: column; width: 350px; background-color: white; border-radius: 10px; overflow: hidden; 
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);">
        <div style="width: 100%;height:calc(100% - 539px);"></div>
            <div style="display: flex; flex-direction: column; width: 100%;height: 539px;background-color: #f3f3f3; ">
                <!-- 聊天窗口 -->
                <div class="newsList" style="height: 100%;margin: 10px 0;  overflow-y: scroll;">
                    <div style="display: flex; flex-direction: column; margin: 0 10px;">
                        <div v-for="(item,index) in newsList" :key="index" style="font-size: 14px; margin-bottom: 5px;">
                            <span style="color: #919191;">{{item.name}}：</span><span>{{item.news}}</span>
                        </div>
                    </div>
                </div>
                <!-- 发送消息 -->
                <div style="flex-shrink: 1;margin: 0 10px 10px; ">
                    <el-input type="textarea" :rows="3" resize="none" show-word-limit :maxlength="50" placeholder="请输入消息" v-model="text"></el-input>
                    <el-button type="primary" size="small" @click.trim="send" style="float: right;" icon="el-icon-s-promotion">发送</el-button>
                </div>
            </div>
        </div>
    </div>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    data() {
        return {
            text:'',
            name:'',
            isLiveBarrage:true,
            websocket: null,//websocket
            newsList: [],//消息列表
        }
    },
    methods: {
        send() {
            if (this.text) {
                
            }
        },
        getData() {//获取直播间号
            const _this = this;
            if (getQueryObject().room) {
                $.ajax({
                    url: DomainName + '/getInquiryIDAction?grant_type=tourist',
                    type: 'POST',
                    data: {
                        Data: 'live_broadcast',
                        isNullEnterprise: true,
                        Primary_Key: getQueryObject().room,
                        Primary_Key_Name: 'User_Number'
                    },
                    success: function (res) {
                        _this.user = res[0]
                        callback(res[0])
                    },
                    error: function () {
                        _this.$message.error("操作失败，请稍后再试")
                    },
                    complete: function (XMLHttpRequest) {
                        _this.loading = false
                        if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                            window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                        }
                    }
                })
            }
        }
    },
    destroyed() {
        this.websocket.close()
    },
    mounted() {
        // this.getData((res)=>{
        //     if (this.name) {
        //         this.websocket = new NewWebSocket();
        //         this.websocket.init({
        //             url:`ws://192.168.10.74:8082/test/room?User_Id=${this.name}&liveBroadcastId=${15000}&channel=${1}`,
        //             onopen: (msg, data) => {
        //                 console.log(msg, data)
        //             },
        //             onmessage: (data) => {
        //                 try {
        //                     let obj = JSON.parse(data)
        //                     if (obj.type == 'news') {
        //                         this.newsList.push(obj)
        //                         this.canvas.barrager([{ msg: obj.news }]);
        //                     } else if (obj.type == 'system') {
        //                         this.index = obj.number
        //                     }
        //                 } catch (error) { }
        //             },
        //             onclose: (data) => {
        //                 console.log(data)
        //             }
        //         })
        //     }
        //     if (Hls.isSupported()) {
        //         var hls = new Hls();
        //         hls.loadSource(`http://192.168.10.74/live/${res.Live_Broadcast_SerialNumber}.m3u8`);
        //         hls.attachMedia($('#video')[0]);
        //         hls.on(Hls.Events.MANIFEST_PARSED, function () {
        //             $('#video')[0].play();
        //         });
        //     }
        // });
    },
})
//直播配置方法
Vue.component('LiveBroadcastConfig', {
    template: `<el-collapse :id="'config'+id" v-model="activeNames">
    <div class="table_titel">
        <div class="titel">直播组件</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="栅格间距">
            <el-input-number v-model="data.gutter" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="3" border size="small">
        <el-descriptions-item label="开启弹性布局">
            <el-switch v-model="data.type" active-value="flex" :inactive-value="false"></el-switch>
        </el-descriptions-item>
    </el-descriptions></el-collapse>`,
    mixins: [globalConfig, rowGlobalConfig, drag],
    props: ['slot'],
    data() {
        return {
            activeNames:[]
        }
    },
    methods: {

    },
    mounted() {

    }
})
